	<!-- 关于我们 -->
<template>
  <div>
    <myheader title="关与我们" rightBtn="主页" @updataInfo="goHome"></myheader>
    <div class="AboutUs">
      <div class="AboutUs_div">
        <img src="../../assets/zhihui.png" alt />
        <ul class="AboutUs_div_ul">
          <li>
            <span>出品单位：</span>
            <span>{{alley.author}}</span>
          </li>
          <li>
            <span>热线电话：</span>
            <span>{{alley.iphone}}</span>
          </li>
          <li>
            <span>qq群号:</span>
            <span>{{alley.qq}}</span>
          </li>
          <li>
            <span>地址：</span>
            <span>{{alley.addres}}</span>
          </li>
          <li>
            <van-tag @click="showTexts" text-color="#ad0000">使用须知</van-tag>
          </li>
        </ul>
        <van-dialog :show="showText" title="版权声明" @confirm="showText=false">
          <p style="padding:15px;text-indent:2em;">
            智慧小巷APP提供的内容或服务用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,
            但同时应遵守著作权法及其他相关法律的规定,不得侵犯本APP及相关权利人的合法权利。
            除此以外,将智慧小巷APP任何内容或服务用于其他用途时,须征得研发组及相关权利人的书面许可,并支付报酬。
          </p>
        </van-dialog>

        <div class="tabs_bootom">
          <van-tabs :active="active" animated>
            <van-tab title="学校地图定位">
              <div class="map">
                <bai-du-map />
                <location />
              </div>
            </van-tab>
            <van-tab title="研发组qq群">
              <img src="../../assets/image/aboutUs/qq.jpg" alt style="width:200px; height:200px;" />
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myheader from '../../comon/myheader.vue'
import BaiDuMap from '../../comon/BaiduDitu.vue'
import Location from '../../comon/location.vue'

export default {
  components: {
    myheader,
    BaiDuMap,
    Location,
  },

  data() {
    return {
      alley: {
        author: '福州理工学院软件协会-CLDZ工作室',
        iphone: '17709674237',
        addres: '福建省福州理工学院',
        qq: 674921779,
      },
      showText: false,
    }
  },
  methods: {
    showTexts() {
      this.showText = !this.showText
    },
    goHome() {
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  padding: 0 !important;
}
.AboutUs {
  height: 150vh;
  overflow: scroll;
}
.AboutUs_div {
  width: 100%;
  position: relative;
  top: 8%;
}
.AboutUs_div > img {
  display: block;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: auto;
  text-align: center;
}
.AboutUs_div > ul {
  font-size: 16px;
  margin-top: 40px;
}
.AboutUs_div_ul > li {
  width: 100%;
  margin: auto;
  padding: 0 5px;
}
.AboutUs_div_ul > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.AboutUs_div_ul > li > span {
  padding: 5px;
}
.tabs_bootom {
  height: 30vh;
}
.tabs_bootom img,
.map {
  width: 100% !important;
  min-height: 80vh !important;
}
</style>
